<template>
    <div class="colorPlan">
        <div class="colorPlan-title" :title="activeMenu.label">{{ activeMenu.label }}</div>

        <li v-for="(sub, index) in mapColorPlan" :key="index">
            <div :style="{ background: sub.backgroundColor }"></div>
            <span v-if='mapOptions.compareType==1'>{{ sub.label }} ({{ sub.min }} - {{ sub.max }}) </span>
            <span v-else>{{ sub.label }} ({{ sub.value }}) </span>
        </li>

    </div>
</template>


<script>
export default {
    props: {
        mapColorPlan: {
            type: Array,
        },
        mapOptions:{
			type:Object,
			default:()=>{
				return {
					title:'',//标题字段
					lnglat:'',//坐标字段
					innerType:'icon',//展示图标或字段值
					innerField:'',//字段
					useColorRules:false,
					compareField:'',//颜色方案比较字段
					compareType:'1'//颜色方案比较方式 1区间 2 等值
				}
			}
			
		},
        activeMenu: {
            type: Object,
        }
    },
    data() {
        return {
        }
    },
    watch: {
        activePoint: {
            handler: function () {
                if (this.activePoint.dataId == this.dataId) return
            },
            deep: true,
        }
    },
    mounted() {

    },
    methods: {

    },
}
</script>
<style scoped>
.colorPlan {
    padding: 10px;
    background: rgba(0, 0, 0, .3);
    border-radius: 5px;
    font-size: 12px;
    margin-bottom:10px
}
.colorPlan-title{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.colorPlan li {
    display: flex;
    justify-content: center;
    align-items: center;
}

.colorPlan li span {
    flex: 1;
    margin-left: 10px
}

.colorPlan li div {
    width: 10px;
    height: 10px;
}
</style>
